import { defineComponent, watch, ref } from 'vue'
import { useHomeStore } from '@/store'
import { storeToRefs } from 'pinia'

// 定义主体
export default defineComponent({
  setup() {
    const home = useHomeStore();
    home.greenSellTk()
    const { sellTk } = storeToRefs(home);
    const chartRef = ref()
    let options = {}

    // 监听
    watch(
      () => sellTk,
      (val: any) => {
        const { xAxisData, windowSeriesData, netSeriesData } = val.value
        
        options = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['窗口', '网售']
          },
          xAxis: { 
            type: 'category',
            data: xAxisData 
          },
          yAxis: {} ,
          series: [
            {
              name: '窗口',
              type: 'bar',
              data: windowSeriesData
            },
            {
              name: '网售',
              type: 'bar',
              data: netSeriesData
            },
          ]
        }
        // 手动触发更新
        if (chartRef.value) {
          // 通过初始化参数打入数据
          chartRef.value.initChart(options)
        }
      },
      {
        immediate: true,
        deep: true
      }
    )

    return () => {
      const height = "350px"
      const width = "100%"

      return <div>
        <echart ref={chartRef} height={height} width={width} />
      </div>
    }
  }
})

